<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <my-bared>内容管理</my-bared>
      </div>
      <el-form size="small">
        <el-form-item label="状态：">
          <el-radio-group v-model="info.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio
              type="info"
              :label="1"
            >待审核</el-radio>
            <el-radio
              type="success"
              :label="2"
            >审核通过</el-radio>
            <el-radio
              type="warning"
              :label="3"
            >审核失败</el-radio>
            <el-radio
              type="danger"
              danger:label="4"
            >已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select
            clearable
            @change="change_channel"
            v-model="info.channel_id"
            placeholder="请选择"
          >
            <el-option
              v-for="(item , index) in channels_data"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <!-- value-format="yyyy-MM-dd" -->
          <el-date-picker
            @change="valueDtae_change"
            v-model="valueDtae"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="screen"
            type="primary"
          >筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      style="margin-top:15px"
      class="box-card"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>根据筛选条件共查询到{{total_count}}条结果</span>
      </div>
      <div>
        <el-table
          :data="data"
          style="width: 100%"
        >
          <el-table-column
            label="封面"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <!-- <span style="margin-left: 10px">{{ scope.row.date }}</span> -->
              <!-- <img
                style="height:80px"
                :src=""
                alt=""
              > -->
              <el-image
                class="images"
                :src="scope.row.cover.images[0]"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <img
                    class="images"
                    src="../../assets/error.gif"
                    alt=""
                  >
                </div>
              </el-image>
            </template>

          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                type="info"
                v-if="scope.row.status===0"
              >草稿</el-tag>
              <el-tag v-if="scope.row.status===1">待审核</el-tag>
              <el-tag
                v-if="scope.row.status===2"
                type="success"
              >审核通过</el-tag>
              <el-tag
                v-if="scope.row.status===3"
                type="warning"
              >审核失败</el-tag>
              <el-tag
                v-if="scope.row.status===4"
                type="danger"
              >已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
          >
            <template slot-scope='scope'>
              <el-link 
                 @click="toEdit(scope.row.id)"
                style="margin-right:10px"
                type="success"
              >修改</el-link>
              <el-link @click="del_content(scope.row.id)" type="danger">删除</el-link>
            </template>
            <!-- <el-link
              style="margin-right:10px"
              type="success"
            >修改</el-link>
            <el-link type="danger">删除</el-link> -->
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Number(total_count)"
          :page-size="Number(info.per_page)"
          :current-page="Number(info.page)"
          @current-change="change_page"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueDtae: [],
      info: {
        status: null,
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null,
        page: 1,
        per_page: 10
      },
      data: [],
      response_type: "",
      total_count: "",
      channels_data: ""
    };
  },
  created() {
    this.getLists();
    this.channels();
  },
  methods: {
    //  筛选
    screen() {
      this.info.page = 1;
      this.getLists();
    },
    // 频道清空
    change_channel(v) {
      // console.log("change_channel", v);
      if (this.info.channel_id === "") {
        this.info.channel_id = null;
      }
    },
    // 获取时间
    valueDtae_change(v) {
      console.log("vvv", v);
      if (v) {
        this.info.begin_pubdate = v[0];
        this.info.end_pubdate = v[1];
      } else {
        this.info.begin_pubdate = null;
        this.info.end_pubdate = null;
      }
    },
    // 获取频道
    async channels() {
      const {
        data: { data }
      } = await this.$http.get("channels");
      console.log(data);
      this.channels_data = data.channels;
    },

    // 获取文章
    async getLists() {
      const res = await this.$http.get("/articles", { params: this.info });
      console.log("文章", res.data);
      this.data = res.data.data.results;
      this.total_count = res.data.data.total_count;
    },

    //  跳转编辑页面
    toEdit(id) {
     console.log(id);
     this.$router.push({path:'/article',query:{id}})
    },

    // 删除
    del_content(id) {
     this.$confirm("确定删除该文章么？",'提示',{
       confirmButtonText: '确定' ,
       cancelButtonText: '取消' ,
       type: 'warning'
     }).then(async ()=> { 
       await this.$http.delete(`/articles/${id}`)
       this.getLists()
       this.$message( {
         type: "success",
         message: '删除成功'
       })
     }).catch(()=>{
       this.$message({
         type: 'info',
         message: "删除失败"
       })
     })
    },
    // 分页
    change_page(v) {
      this.info.page = v;
      this.getLists();
    }
  }
};
</script>

<style scope lang='less'>
.images {
  width: 140px;
  height: 130px;
}
</style>